<template>
  <el-card style="margin-bottom:20px;">
    <!--    个人信息头部-->
    <div slot="header" class="clearfix">
      <span style="font-size: 20px">个人基本信息 <i id="icon_refresh" class="el-icon-refresh" style="cursor: pointer;" @click="reloaddata" /></span>
      <div style="height: 20px" />
      <div style="font-size: 5px">
        <span style="color: #777777">信息完善程度：{{ propertyPercent }}%</span>
        <el-progress :percentage="propertyPercent" show-text :status="status" />
      </div>
    </div>
    <!--个人信息内容--头像部分-->
    <div class="user-profile">
      <div class="box-center">
        <pan-thumb :image="user.avatar" :height="'100px'" :width="'100px'" :hoverable="false">
          <div @click="test">Hello</div>
          {{ user.roles[0].roleName }}
        </pan-thumb>
      </div>
      <div class="box-center">
        <div class="user-name text-center">昵称：{{ user.username }}</div>
        <div class="user-role text-center text-muted">当前角色：{{ user.roles[0].roleName }}</div>
        <div class="user-role text-center text-muted">当前账号：{{ user.name }}</div>
      </div>
    </div>
    <!--个人信息个人说明部分-->
    <div class="user-bio">
      <div class="user-education user-bio-section">
        <div class="user-bio-section-header"><svg-icon icon-class="education" /><span>个人说明</span></div>
        <div class="user-bio-section-body">
          <div class="text-muted">
            {{ user.memo }}
          </div>
        </div>
      </div>
      <div class="user-education user-bio-section">
        <div class="user-bio-section-header"><svg-icon icon-class="education" /><span>联系信息</span></div>
        <div class="user-bio-section-body">
          <div class="progress-item">
            <span>我的电话：{{ user.phone }}</span>
          </div>
          <div class="progress-item">
            <span>来源省会：{{ user.region }}</span>
          </div>
          <div class="progress-item">
            <span>电子邮箱：{{ user.email }}</span>
          </div>
          <div class="progress-item">
            <span>填写时间：{{ (user.creatTime) | fomatDate(user.updateTime) }}</span>
          </div>
          <div class="progress-item">
            <span>上次修改时间：{{ user.updateTime | fomatDate(user.updateTime) }}</span>
          </div>
          <div class="progress-item">
            <span>性别：</span>
            <el-radio-group v-model="user.gender">
              <el-radio value="男" style="color: dodgerblue" label="男"><i class="el-icon-male" /></el-radio>
              <el-radio value="女" style="color: red" label="女"><i class="el-icon-female" /></el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="user-skills user-bio-section">
        <div class="user-bio-section-header"><svg-icon icon-class="skill" /><span>兴趣爱好</span></div>
        <div class="user-bio-section-body">
          <el-tag
            v-for="tag in dynamicHobbyTags"
            :key="tag"
            :disable-transitions="false"
          >
            {{ tag }}
          </el-tag>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import PanThumb from '@/components/PanThumb'
const { fomatMilsToDate } = require('@/utils/DateUtil')
export default {
  name: 'UserCard',
  components: { PanThumb },
  filters: {
    fomatDate: (mils) => {
      return fomatMilsToDate(mils)
    }
  },
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: '', // 个人账号
          usercode: '', // 个人账号编号
          username: '', // 用户个人名称
          gender: '', // 个人性别
          region: '', // 来自省会
          hobby: '', // 兴趣爱好
          phone: '', // 电话
          email: '', // 邮箱地址
          memo: '', // 个人说明
          avatar: '', // 头像地址
          roles: [], // 角色列表
          creatTime: '', // 数据创建时间
          updateTime: '' // 上次修改时间
        }
      }
    }
  },
  data() {
    return {
      dynamicHobbyTags: [], // 兴趣标签集合
      propertyPercent: 0, // 统计不为空属性个数
      status: 'exception' // 完善程度进度条显示类型
    }
  },
  inject: ['reload'],
  mounted() {
    this.dynamicHobbyTags = this.user.hobby.split(',')
    this.checkPropertisCount() // 计算不为空属性有多少个
    this.checkProperty() // 检测进度条设置其展示样式
  },
  methods: {
    reloaddata() {
      this.reload()
    },
    test() {
      console.log(this.user)
    },
    checkPropertisCount() {
      const userobj = this.user
      const allvaluesarr = Object.values(userobj).length
      const NotnullValuearr = Object.values(userobj).filter(item => item !== null && item !== '' && item !== undefined).length
      this.propertyPercent = (NotnullValuearr / allvaluesarr).toFixed(2) * 100
    },
    checkProperty() {
      if (this.propertyPercent >= 90) {
        this.status = 'success'
      } else if (this.propertyPercent >= 50 && this.propertyPercent < 90) {
        this.status = 'exception'
      } else {
        this.status = 'warning'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#icon_refresh:hover{
  color: dodgerblue;
}
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 10px;
  }

  .user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user-follow {
    padding-top: 20px;
  }
}

.user-bio {
  margin-top: 20px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 15px 0;

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
    }
    .user-bio-section-body{
      .progress-item{
        margin-bottom: 10px;
      }
    }
  }
}
</style>
